<template>
  <div class="">
    <div class="title">下载答案文件并入库</div>
    <div class="content">
      <div class="flex header" style="height: 36px; line-height: 36px">
        <span>说明：如果该场次答案收集及检测无误，即可点击【下载】</span>
        <div>
          <el-button type="warning" size="mini" @click="Onebtn"
          >一键合并
          </el-button
          >
          <el-button type="primary" size="mini" @click="checkAnswer"
          >答案校验
          </el-button
          >
          <el-button type="primary" size="mini" @click="answerToCorrect"
          >答案扶正
          </el-button
          >
        </div>
      </div>

      <el-table
        :data="downLoadAnswerlist"
        v-loading="loading"
        stripe
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="testSessionZh" label="考试天次" width="180">
        </el-table-column>
        <el-table-column prop="subjectIndexZh" label="考试场次" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.status == '检查已完成可以下载' ||
                scope.row.status == '下载失败'
              "
              type="success"
              size="small"
              plain
              @click="
                download(
                  scope.$index,
                  scope.row.subjectIndex,
                  scope.row.testSession
                )
              "
            >下载
            </el-button
            >

            <el-button v-else type="info" size="small" plain disabled
            >下载
            </el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>

        <el-table-column label="进度">
          <template slot-scope="scope">
            <el-progress
              v-if="scope.row.status == '下载中'"
              :text-inside="true"
              :stroke-width="26"
              :percentage="percentage"
            ></el-progress>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 一键合并 -->
    <el-dialog
      title="校验结果"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-loading="loading1">{{ checkAnswerss }}</div>
    </el-dialog>
    <combination
      :dialogVisibleFu="dialogVisibleFu"
      @closeDialog="closeDialog"
    ></combination>
  </div>
</template>

<script>
  import Cookies from "js-cookie";
  import {
    downLoadAnswer,
    downLoadProgress,
    statusAnswer,
    checkFormalAnswer,
    updateFormalAnswer
  } from "@/api/toolsystem/downloadAnswer";

  import combination from "@/components/ToolSystem/Examine/combination";

  export default {
    components: {
      combination,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        loading1: true,
        // list
        downLoadAnswerlist: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        status: "",
        percentage: 0,
        timer: null,
        dialogVisibleFu: false,
        dialogVisible: false,
        checkAnswerss: "",
        //所有的status
        oneBtnList: [],
      };
    },
    created() {
      this.getList();
    },
    watch: {
      percentage(val) {
        console.log(val, "val");
        if (this.percentage == 100) {
          clearInterval(this.timer);
          this.getList();
        }
      },
    },
    methods: {
      // 答案扶正按钮
      answerToCorrect() {
        updateFormalAnswer().then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      },
      closeDialog(val) {
        this.dialogVisibleFu = val;
      },
      getList() {
        this.loading = true;
        // 获取列表
        downLoadAnswer()
          .then((res) => {
            // console.log(response, "joinlist");
            if (res.code != 200) {
              this.loading = false;
              // return this.msgError(response.msg);
            }
            this.downLoadAnswerlist = res.rows;
            this.downLoadAnswerlist.map((item) => {
              this.oneBtnList.push(item.status);

              if (item.status == "下载中") {
                return (this.timer = setInterval(() => {
                  this.downLoadProgress();
                }, 2000));
              }
            });
            this.total = res.total;
            this.status = res.status;
            // console.log(this.total)
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
            // console.log(error);
          });
      },
      // 下载入库
      download(index, subjectIndex, testSession) {
        // console.log(index, subjectIndex, testSession);
        this.timer = setInterval(() => {
          this.downLoadProgress();
        }, 2000);
        statusAnswer(testSession, subjectIndex).then((res) => {
          if (res.code != 200) {
            return this.msgInfo(res.msg);
          }
          if (res.data == 1) {
            this.downLoadAnswerlist[index]["status"] = "下载中";
            // return this.msgInfo(res.msg);
          } else {
            return this.msgError("正在下载处理中，请稍后");
          }
        });
      },
      // 得到下载进度
      downLoadProgress() {
        // console.log(index);
        downLoadProgress().then((res) => {
          console.log(res.msg);
          if (res.code != 200) {
            return;
          }
          this.percentage = Number(res.msg) * 100;
        });
      },

      //一键合成
      Onebtn() {
        function f(value, index, arr) {
          if (value == "下载成功") {
            return true;
          } else {
            return false;
          }
        }

        //.every可以差数组里面每个元素
        if (this.oneBtnList.every(f)) {
          this.dialogVisibleFu = true;
        } else {
          return this.msgInfo("所有下载完成时才可点击一键合并");
        }
      },
      //校验答案
      checkAnswer() {
        // const isDownTrue = Cookies.get("tool_system_down_true", 1);
        // if (isDownTrue != 1) {
        //   return this.msgInfo("请先完成一键合并");
        // }
        this.dialogVisible = true;
        this.loading1 = true;
        checkFormalAnswer()
          .then((res) => {
            console.log(res);
            this.checkAnswerss = res;
            this.loading1 = false;
          })
          .catch((error) => {
            this.loading1 = false;
            // console.log(error);
          });
      },
      handleClose(done) {
        done();
      },
    },
  };
</script>

<style scoped>
  /* @import "../../../assets/styles/card.scss"; */
  .flex {
    display: flex;
  }

  .title {
    color: white;
    padding: 27px 25px;
    background-color: gray;
    font-size: 14px;
  }

  span {
    font-size: 13px;
  }

  .content {
    margin: 28px;
  }

  .header {
    justify-content: space-between;
  }
</style>
